<template>
  <div class="login">
    <div class="login_content">
    <!-- 页头 -->
    <el-page-header @back="goBack" content="登录"></el-page-header>
    <!-- <el-alert
    title="用户名或密码错误"
    type="error">
  </el-alert> -->
    <div class="login_content_box">
      <!-- 表单 -->
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        hide-required-asterisk
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="loginName">
          <el-input
            type="text"
            v-model="ruleForm.loginName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
    <!-- 侧边栏 -->
    <div class="login_sidebar">
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>关于</span>
  </div>
  <div class="text item">
    <p>CNode:Node.js专业中文社区</p>
    <p>在这里你可以:</p>
    <ul>
      <li>向别人提出你遇到的问题</li>
      <li>帮助遇到问题的人</li>
      <li>分享自己的知识</li>
      <li>和其他人一起进步</li>
      </ul>
  </div>
</el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        pass: "",
        loginName: "",
      },
      rules: {
          loginName: [
            {trigger: 'blur',required: true, message: '用户名不能为空'}
          ],
          pass: [
            { trigger: 'blur'}
          ]
      }
    }
  },
  methods: {
    goBack() {
      console.log("go back");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("提交成功!");
        } else {
          console.log("用户名或密码错误");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>